<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>ajax-2</title>
<jsp:include page="/head.jsp"></jsp:include>
</head>

<body>
	<h2>POST GET参数</h2>
	<div id="show"></div>
	<hr style="width: 100%; clear: left;" />
	<input name="name" value="b&c=d" />
	<button>发送get</button>
	<button>发送post</button>
	<script>
		var show = document.getElementById("show");
		var btns = document.body.querySelectorAll("button");
		var a = document.querySelector("input");

		btns[0].addEventListener("click", function() {
			let xhr = new XMLHttpRequest();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					show.innerHTML += xhr.responseText;
				}
			}
			//			xhr.open("GET", "demo/inc.jsp?name=" + a.value, true);
			//传递的属性参数可能为特殊字符，需要进行编译
			xhr.open("GET", "demo/inc.jsp?name=" + encodeURIComponent(a.value),
					true);
			xhr.send();
		});

		btns[1].addEventListener("click", function() {
			let xhr = new XMLHttpRequest();
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					show.innerHTML += xhr.responseText;
				}
			}
			xhr.open("post", "demo/inc.jsp", true);
			xhr.setRequestHeader("Content-Type",
					"application/x-www-form-urlencoded");
			//			xhr.send("name=" + a.value);
			xhr.send("name=" + encodeURIComponent(a.value));
		});
	</script>

	<!-- 表单method为post，默认有enctype="application/x-www-form-urlencoded" -->
	<form action="demo/inc.jsp" method="post"
		enctype="application/x-www-form-urlencoded">
		<input name="name" value="b&c=d" />
		<button>发送post</button>
	</form>

	<h2>注册</h2>
	<form name="regForm" action="reg-1.let" method="post"
		data-bv-message="验证不通过" data-bv-feedbackicons-valid="fa fa-check"
		data-bv-feedbackicons-invalid="fa fa-times"
		data-bv-feedbackicons-validating="fa fa-refresh">
		<div class="form-group row">
			<label class="col-sm-3 col-form-label text-right"><b
				class="text-danger">*</b>用户名</label>
			<div class="col-sm-9">
				<input name="userName" type="text" placeholder="由3到20个单词字符组成"
					class="form-control" value="" data-bv-trigger="keyup"
					data-bv-notempty-message="用户名不能为空" pattern="^[a-zA-Z]\w{2,19}$"
					data-bv-regexp-message="用户名必须由字母开始的3-20个单词字符组成" data-bv-different
					data-bv-different-field="userPassword"
					data-bv-different-message="用户名不能和密码一样">
			</div>
		</div>

		<div class="form-group row">
			<label class="col-sm-3 col-form-label text-right"><b
				class="text-danger">*</b>密码</label>
			<div class="col-sm-9">
				<input name="userPassword" type="password" placeholder="由3到20个字符组成"
					class="form-control" value="" data-bv-trigger="keyup"
					data-bv-notempty-message="密码不能为空" pattern="^.{3,20}$"
					data-bv-regexp-message="密码必须由3-20个字符组成" data-bv-identical
					data-bv-identical-field="userPasswordConfirm"
					data-bv-identical-message="两次输入的密码必须一致" data-bv-different
					data-bv-different-field="userName"
					data-bv-different-message="密码不能和用户名一样">
			</div>
		</div>

		<div class="form-group row">
			<label class="col-sm-3 col-form-label text-right"><b
				class="text-danger">*</b>密码确认</label>
			<div class="col-sm-9">
				<input name="userPasswordConfirm" type="password"
					placeholder="两次输入密码一致" class="form-control" value=""
					data-bv-trigger="keyup" data-bv-notempty-message="密码确认不能为空"
					data-bv-identical data-bv-identical-field="userPassword"
					data-bv-identical-message="两次输入的密码必须一致" data-bv-different
					data-bv-different-field="userName"
					data-bv-different-message="密码不能和用户名一样">
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-3 col-form-label text-right"><b
				class="text-danger">*</b>昵称</label>
			<div class="col-sm-9">
				<input name="userNickname" type="text" placeholder="由2到8个汉字组成"
					class="form-control" value="" data-bv-trigger="keyup"
					data-bv-notempty-message="昵称不能为空" pattern="^[\u4100-\u9fa5]{2,8}$"
					data-bv-regexp-message="昵称必须由2-8个中文字符组成">
			</div>
		</div>

		<div class="form-group row">
			<label class="col-sm-3 col-form-label text-right"><b
				class="text-danger">*</b>性别</label>
			<div class="col-sm-9">
				<input type="radio" name="userSex" value="true" checked="checked">男
				<input type="radio" name="userSex" value="false">女
			</div>
		</div>

		<div class="form-group row">
			<label class="col-sm-3 col-form-label text-right">出生日期</label>
			<div class="col-sm-9">
				<input type="date" name="userBrithdate" class="form-control"
					style="width: auto;" />
			</div>
		</div>

		<div class="form-group row">
			<label class="col-sm-3 col-form-label text-right">电话</label>
			<div class="col-sm-9">
				<input name="userPhone" type="text" placeholder="有11位数字组成"
					class="form-control" value="">
			</div>
		</div>

		<div class="form-group row">
			<label class="col-sm-3 col-form-label text-right">邮箱</label>
			<div class="col-sm-9">
				<input name="userEmail" type="text" placeholder="电子邮箱地址"
					class="form-control" value="">
			</div>
		</div>

		<div class="form-group row">
			<label class="col-sm-3 col-form-label text-right">QQ</label>
			<div class="col-sm-9">
				<input name="userQq" type="text" placeholder="QQ号码"
					class="form-control" value="">
			</div>
		</div>

		<div class="form-group row">
			<div class="col-sm-9 offset-sm-3">
				<button class="btn btn-primary" id="tj">
					<i class="fa fa-user-plus mr-1"></i> 注册
				</button>

				<a href="./login.jsp" class="btn btn-info">登录</a> <a href="./"
					class="btn btn-link ml-4">首页</a>
			</div>
		</div>
	</form>
	<pre id="paramShow">

	</pre>
	<script type="text/javascript">
		//var btn = document.querySelector("#tj");
		//btn.onclick = function(){
		//	return false;
		//}

		var paramShow = document.querySelector("#paramShow");
		var regForm = document.forms.regForm; //得到整个表单元素
		console.info(regForm);
		regForm.onsubmit = function() {
			/**
			 * FormData 接口提供了一种表示表单数据的键值对的构造方式，经过它的数据
			 可以使用了XMLHttpRequest.send() 方法送出，本接口和此方法都相当简单直接
			 。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。
			 */
			let formData = new FormData(regForm);
			paramShow.textContent = "FormData:";
			paramShow.textContent += "\nuserName=" + formData.get("userName");
			formData.forEach((value,name)=>{
				paramShow.textContent += "\n"+name+"="+value;
			});
			paramShow.textContent += "\n\nURLSearchParams:"
			let p1 = new URLSearchParams();
			//???
			//p1.append("a","aa");
			//p2.append("b","中文");
			//paramShow.textContent += "\n"+p1.toString();
			//paramShow.textContent += "\n"+new URLSearchParams(new FormData(regForm)).toString();
			
			return false;
		};
	</script>
</body>

</html>